<template>
	<view class="content summaryC">
		<view class="summary-year ">
			<view class="year-cont flex-between">
				<view class="year-left font30">
					{{nowYear}}年
				</view>
				<view class="year-right flex-right">
					<view class="year-prev"></view>
					<view class="year-text font30" @click="changeDay('reduce')">
						{{nowMonth}}月
					</view>
					<view class="year-next" @click="changeDay('add')"></view>
				</view>
			</view>
		</view>
		<view class="summary-c">
			<!-- 班次统计 -->
			<block v-for="(item,index) in dataList" :key='index'>
				<!-- 上班统计 -->
				<!-- <view class="summary-day">
					<view class="day-nav font30 flex-between" @click="changeDetail('date',index)">
						<view class="nav-left">
							{{item.status_name}}
						</view>
						<view class="nav-right flex-right">
							<text>{{item.data_count}}天</text>
							<image src="../../static/img/more-ico1.png" mode="widthFix" :class="item.open?'rotate180':''"></image>
						</view>
					</view>
					<view class="summary-list" v-if="item.data.length>0" :class="item.open?'':'close-list'">
						<block v-for="(itm,iv) in item.data" :key="iv">
							<view class="summary-item flex-between font30">
								<view class="item-left">
									{{itm.day}} ({{itm.week}})
								</view>
								<view class="item-right">
									1天
								</view>
							</view>
						</block>
					</view>
				</view> -->
			</block>
		</view>
		
		<view class="summary-c">
			<!-- 考勤统计 -->
			<block v-for="(item1,index1) in attendLists" :key='index1'>
				<!-- 迟到/早退 -->
				<view class="summary-day">
					<view class="day-nav font30 flex-between" @click="changeDetail('attend',index1)">
						<view class="nav-left">
							{{item1.status_name}}
						</view>
						<view class="nav-right flex-right">
							<text>{{item1.data.length}}次</text>
							<image src="../../static/img/more-ico1.png" mode="widthFix" :class="item1.open?'rotate180':''"></image>
						</view>
					</view>
					<view class="summary-list" v-if="item1.data.length>0" :class="item1.open?'':'close-list'">
						<block v-for="(itms,ivs) in item1.data" :key="ivs">
							<view class="summary-item font30">
								<view>
									<view class="item-text1 font30">
										<text>{{itms.day}} ({{itms.week}})</text>
									</view>
									<view class="item-text2 font26">
										{{itms.status_text}}
									</view>
								</view>
								
							</view>
						</block>
					</view>
				</view>
			</block>
		</view>
		
		<view class="summary-c">
			<!-- 申请统计 -->
			<block v-for="(item2,index2) in applyList" :key='index2'>
				<!-- 事假 -->
				<view class="summary-day">
					<view class="day-nav font30 flex-between" @click="changeDetail('apply',index2)">
						<view class="nav-left">
							{{item2.type_name}}
						</view>
						<view class="nav-right flex-right">
							<text>{{item2.apply_day}}天</text>
							<image src="../../static/img/more-ico1.png" mode="widthFix" :class="item2.open?'rotate180':''"></image>
						</view>
					</view>
					<view class="summary-list" :class="item2.open?'':'close-list'">
						<block v-for="(itm,index) in item2.data">
							<view class="summary-item font30">
								<view class="item-text3 font30">
									<text>{{itm.time_length}}天</text>
								</view>
								<view class="item-text4 font30">
									{{itm.start_time}} - {{itm.end_time}}
								</view>
							</view>
						</block>
						
					</view>
				</view>
			</block>
		</view>
		
			
		<lzLoading :showloading='showLoading'></lzLoading>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components:{
			lzLoading
		},
		data() {
			return {
				showLoading: true,
				uid: '',
				nowYear: this.$util.formatTime('now','Y'),
				nowMonth: this.$util.formatTime('now','M'),
				
				dataList: '', //考勤数据
				applyList: '',  //申请数据
				attendLists: '', //考勤数据
				
				timeList: '', //补卡列表
				
			}
		},
		onLoad(options) {
			if(options.id)
			{
				this.uid = options.id
			}
			
		},
		onShow(){
			Promise.all([this.changeAttendance(),this.getMissingCard()]).then((t) => {
				let sett = setTimeout(()=>{
					this.showLoading = false
				},500)
			})
		},
		methods: {
			//年份控制
			changeDay(e){
				if(e=='add')
				{
					this.nowMonth=this.nowMonth*1+1
					if(this.nowMonth>12)
					{
						this.nowMonth=1
						this.nowYear=this.nowYear*1+1
					}
				}else
				{
					this.nowMonth=this.nowMonth*1-1
					if(this.nowMonth<1)
					{
						this.nowMonth=12
						this.nowYear=this.nowYear*1-1
					}
				}
				this.changeAttendance()
			},
			
			//关闭展开
			changeDetail(str,num){
				
				if(str == 'date')
				{
					this.dataList[num].open = !this.dataList[num].open
				}
				if(str == 'apply')
				{
					this.applyList[num].open = !this.applyList[num].open
				}
				if(str == 'attend')
				{
					this.attendLists[num].open = !this.attendLists[num].open
				}
			},
			
			//获取缺卡时间
			getMissingCard(){
				return new Promise((resolve, reject) => {
					this.$api.getMissingCard({
					}, true, (res) => {
						this.timeList = res.days
						resolve("success")
					})
				})
			},
			
			//切换月份
			changeAttendance(){
				this.$api.getMonthAttend({
					month: this.nowYear + '-' + this.nowMonth,
					member_id: this.uid
				}, false, (res) => {
					for(let i=0;i<res.group_data.length;i++)
					{
						res.group_data[i].open = false
					}
					for(let i=0;i<res.wf_apply_data.length;i++)
					{
						res.wf_apply_data[i].open = false
					}
					for(let i=0;i<res.punch_status_group.length;i++)
					{
						res.punch_status_group[i].open = false
					}
					this.dataList = res.group_data;
					this.applyList = res.wf_apply_data;
					this.attendLists = res.punch_status_group; 
				})
			},
			
			//页面跳转
			urllink(url){
				// 跳转到消息
				if(url == 'msg')
				{
					uni.navigateTo({
						url:"../message/index"
					})
				}
				//跳转到统计
				if(url == 'statistics')
				{
					uni.navigateTo({
						url:"../statistics/index"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page
	{
		background: #fafafa;
		.summary-year
		{
			padding: 30rpx 4%;
			.year-cont
			{
				background: #E3F2FF;
				border-radius: 7rpx;
				padding: 20rpx 4%;
			}
			.year-left
			{
				color: #008AFF;
				
			}
			.year-right
			{
				color: #008AFF;
				
			}
			.year-prev
			{
				 width: 0; 
				 height: 0;
				 border-width: 16rpx;
				 border-style: solid;
				 border-color: transparent #008AFF transparent transparent;
			}
			.year-text
			{
				padding: 0 30rpx;
			}
			.year-next
			{
				 width: 0; 
				 height: 0;
				 border-width: 16rpx;
				 border-style: solid;
				 border-color: transparent transparent transparent #008AFF;
			}
		}
		.day-nav
		{
			background: #fff;
			padding: 30rpx 4%;
			.nav-left
			{
				font-weight: bold;
				color: #454545;
			}
			.nav-right
			{
				font-weight: 500;
				color: #787878;
				image
				{
					width: 17rpx;
					height: 12rpx;
					margin-left: 20rpx;
				}
			}
		}
		.summary-day
		{
			margin-bottom: 20rpx;
			.summary-list
			{
				padding: 0 4%;
				transition: all .3s;
				.summary-item
				{
					padding: 30rpx 0;
					.item-left,.item-right
					{
						color: #787878;
					}
					&:last-child
					{
						padding-bottom: 10rpx;
					}
				}
				.item-text1
				{
					font-weight: 500;
					color: #787878;
					padding-bottom: 10rpx;
					text
					{
						margin-right: 20rpx;
					}
				}
				.item-text2
				{
					font-weight: 500;
					color: #008AFF;
				}
				.item-text4
				{
					font-weight: 500;
					color: #787878;
				}
				.item-text3
				{
					padding-bottom: 10rpx;
					font-weight: 500;
					color: #008AFF;
				}
				.item-btn
				{
					font-weight: 500;
					color: #008AFF;
					padding: 10rpx 20rpx;
					background: #FFFFFF;
					border: 1rpx solid #008AFF;
					border-radius: 30rpx;
				}
			}
		}
		.close-list
		{
			height: 0;
			overflow: hidden;
			transition: all .3s;
		}
		.rotate180
		{
			transition: all .3s;
			transform: rotate(180deg);
		}
	}
</style>
